<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)
const props = defineProps(['tableData'])

const initEcharts = ((item) => {
  const data = item.child.map(item => {
    return {
      "name": item.name,
      "value": item.value,
      "rate": item.ratio
    }
  })
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      legend: {
        type: 'scroll',
        align: 'left',
        bottom: '0',
        formatter: function (name) {
          return name.substring(0, 2)
        }
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          center: ['50%', '45%'],
          radius: ['40%', '55%'],
          data: data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: {
            normal: {
              show: true,
              position: 'outside',
              formatter: '{d}%'
            }
          },
        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})
watch(() => props.tableData, (newValue, oldValue) => {
  initEcharts(newValue)
}, {immediate: true, deep: true})

onMounted(() => {
  initEcharts(props.tableData)
})

</script>

<style lang="less" scoped>
</style>
